﻿@page "/tabs/orientation"

@using Syncfusion.Blazor.Navigations
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Lists
@inject Microsoft.AspNetCore.Components.NavigationManager UriHelper; 
@inherits SampleBaseComponent;

<SampleDescription>
    <p> This sample demonstrates the <code>Header</code> orientation of the <code>Tab</code>. Select option from drop-downs to switch header placement and changing the header style in properties panel.</p>
</SampleDescription>
<ActionDescription>
   <p>The <code>Tab</code> allows to place the header section inside the Tab component either at <code>Top / Bottom / Left / Right</code> position by using <code>HeaderPlacement</code> property.</p>
   <p>This sample illustrates the use of header placement and <code>ShowCloseButton</code> property.
      Users can change the header position by changing the drop-down value options and can close the Tab item by clicking close icon in header.<br /><br />
      The User can also view different header styles of Tab component by selecting options from `Header Styles` drop-down.
      Header styles changed by adding predefined classes in Tab root element and it class names listed below
    <br />
    <ul><li>Material and Fabric theme differentiates all the available tab header styles such as <b>e-fill</b>, <b>e-background e-accent</b>.</li>
        <li>In bootstrap theme, all the styles such as <b>e-fill</b> & <b>e-background e-accent</b> will have the same look with no difference.</li>
    </ul>
     If above classes not included in root element default style will applied in Tab component.</p>
    <p>More information about Tab can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/tab/getting-started/'> documentation </a> section. </p>
</ActionDescription>

<div class="e-tab-section">
    <div class="col-lg-8 content-wrapper control-section">
        <div class="e-sample-resize-container">
            <SfTab Height="320" ShowCloseButton="true" HeaderPlacement="@HeaderValue" CssClass="@HeaderStyles">
                <TabItems>
                    <TabItem>
                        <ChildContent>
                            <TabHeader Text="Rome"></TabHeader>
                        </ChildContent>
                        <ContentTemplate>
                            <div class="tab-content">
                                <div class="content-title">
                                    <div class="cnt-text">Employee Info</div>
                                </div>
                                <SfListView Enable="true" DataSource="@RomeDataList">
                                    <ListViewFieldSettings TValue="DataModel"  Id="Id" Text="Name"></ListViewFieldSettings>
                                    <ListViewTemplates TValue="DataModel">
                                        <Template>
                                            <div class="template-container">
                                                <div class="left">
                                                    <img class="empImg" src=@UriHelper.ToAbsoluteUri($"images/tabs/{context.Image}.png") alt=@context.Image />
                                                </div>
                                                <div class="left empl-info">
                                                    <div class="name">@context.Name</div>
                                                    <div class="role">@context.Designation</div>
                                                </div>
                                            </div>
                                        </Template>
                                    </ListViewTemplates>
                                </SfListView>
                            </div>
                        </ContentTemplate>
                    </TabItem>
                    <TabItem>
                        <ChildContent>
                            <TabHeader Text="Paris"></TabHeader>
                        </ChildContent>
                        <ContentTemplate>
                            <div class="tab-content">
                                <div class="content-title">
                                    <div class="cnt-text">Employee Info</div>
                                </div>
                                <SfListView Enable="true" DataSource="@ParisDataList">
                                    <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Name"></ListViewFieldSettings>
                                    <ListViewTemplates TValue="DataModel">
                                        <Template>
                                            <div class="template-container">
                                                <div class="left">
                                                    <img class="empImg" src=@UriHelper.ToAbsoluteUri($"images/tabs/{context.Image}.png") alt=@context.Image />
                                                </div>
                                                <div class="left empl-info">
                                                    <div class="name">@context.Name</div>
                                                    <div class="role">@context.Designation</div>
                                                </div>
                                            </div>
                                        </Template>
                                    </ListViewTemplates>
                                </SfListView>
                            </div>
                        </ContentTemplate>
                    </TabItem>
                    <TabItem>
                        <ChildContent>
                            <TabHeader Text="London"></TabHeader>
                        </ChildContent>
                        <ContentTemplate>
                            <div class="tab-content">
                                <div class="content-title">
                                    <div class="cnt-text">Employee Info</div>
                                </div>
                                <SfListView Enable="true" DataSource="@LondonDataList">
                                    <ListViewFieldSettings TValue="DataModel" Id="Id" Text="Name"></ListViewFieldSettings>
                                    <ListViewTemplates TValue="DataModel">
                                        <Template>
                                            <div class="template-container">
                                                <div class="left">
                                                    <img class="empImg" src=@UriHelper.ToAbsoluteUri($"images/tabs/{context.Image}.png") alt=@context.Image />
                                                </div>
                                                <div class="left empl-info">
                                                    <div class="name">@context.Name</div>
                                                    <div class="role">@context.Designation</div>
                                                </div>
                                            </div>
                                        </Template>
                                    </ListViewTemplates>
                                </SfListView>
                            </div>
                        </ContentTemplate>
                    </TabItem>
                </TabItems>
            </SfTab>
        </div>
    </div>
    <div class="col-md-4 property-section">
        <div class="property-panel-section">
            <div class="property-panel-header">Properties</div>
            <div class="property-panel-content">
                <table id="property" title="Properties" style="width: 100%" class="property-panel-table">
                    <tbody>
                        <tr>
                            <td style="width: 50%;">
                                <div>Header Placement</div>
                            </td>
                            <td style="width: 50%;">
                                <div>
                                    <SfDropDownList TItem="DropdownFields" DataSource="@OrientationData" @bind-Value="@Header" TValue="string">
                                        <DropDownListEvents TItem="DropdownFields" ValueChange="OnHeaderPositionChange" TValue="string"></DropDownListEvents>
                                        <DropDownListFieldSettings Value="Value" Text="Text"></DropDownListFieldSettings>
                                    </SfDropDownList>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 50%;">
                                <div>Header Styles</div>
                            </td>
                            <td style="width: 50%;">
                                <div>
                                    <SfDropDownList TItem="DropdownFields" DataSource="@HeaderStylesData" Value="@HeaderStyles" TValue="string">
                                        <DropDownListEvents TItem="DropdownFields" ValueChange="OnHeaderStyleChange" TValue="string"></DropDownListEvents>
                                        <DropDownListFieldSettings Value="Value" Text="Text"></DropDownListFieldSettings>
                                    </SfDropDownList>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

@code {
    public HeaderPosition HeaderValue { get; set; } = HeaderPosition.Top;
    public string HeaderStyles { get; set; } = "";
    public string Header { get; set; } = "Top";

    List<DropdownFields> OrientationData = new List<DropdownFields>() {
            new DropdownFields() { Value= "Top", Text= "Top" },
            new DropdownFields() { Value= "Bottom", Text= "Bottom" },
            new DropdownFields() { Value= "Left", Text= "Left" },
            new DropdownFields() { Value= "Right", Text= "Right" }
        };

    List<DropdownFields> HeaderStylesData = new List<DropdownFields>() {
            new DropdownFields() { Value= "", Text= "Default" },
            new DropdownFields() { Value= "e-background e-accent", Text= "Accent" },
            new DropdownFields() { Value= "e-fill", Text= "Fill" }
        };

    DataModel Model = new DataModel();

    List<DataModel> RomeDataList = new List<DataModel>() {
                new DataModel() { Name = "Anne Dodsworth", Designation = "Product Manager", Id = "1", Image = "Anne"},
                new DataModel() { Name = "Laura Callahan", Designation = "Team Lead", Id = "2", Image = "Laura"},
                new DataModel() { Name = "Andrew Fuller", Designation = "Developer", Id = "3", Image = "Andrew"}
                };
    List<DataModel> ParisDataList = new List<DataModel>() {
                new DataModel() { Name = "Robert King", Designation = "Team Lead", Id = "1", Image = "Robert"},
                new DataModel() { Name = "Michael Suyama", Designation = "Developer", Id = "2", Image = "Michael"},
                new DataModel() { Name = "Margaret Peacock", Designation = "Developer", Id = "3", Image = "Margaret"}
                };
    List<DataModel> LondonDataList = new List<DataModel>() {
                new DataModel() { Name = "Janet Leverling", Designation = "CEO", Id = "1", Image = "Janet"},
                new DataModel() { Name = "Steven Buchanan", Designation = "HR", Id = "2", Image = "Steven"},
                new DataModel() { Name = "Nancy Davolio", Designation = "Product Manager", Id = "3", Image = "Nancy"}
                };

    public void OnHeaderPositionChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropdownFields> args)
    {
        HeaderValue = (HeaderPosition)Enum.Parse(typeof(HeaderPosition), (args.Value as string));
    }
    public void OnHeaderStyleChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, DropdownFields> args)
    {
        HeaderStyles = args.Value;
    }

    public class DropdownFields
    {
        public string Value { get; set; }
        public string Text { get; set; }
    }

    public class DataModel
    {
        public string Name { get; set; }
        public string Designation { get; set; }
        public string Id { get; set; }
        public string Image { get; set; }
    }
}

<style>
    @@media screen and (min-width: 768px) {
        .e-sample-resize-container {
            width: 75%;
            margin: 0 auto;
        }
    }
    
    .tab-content {
        padding: 10px;
    }

    .template-container {
        height: 100%;
        padding-top: 7px;
    }

    .left {
        display: inline-block;
        vertical-align: top;
    }

    .empImg {
        height: 48px;
        width: 48px;
    }

    .name, .role {
        line-height: normal;
    }

    .name {
        font-weight: 500;
    }

    .role {
        font-weight: 100;
        font-size: 12px;
    }

    .empl-info {
        padding: 7px 0 0 15px;
    }

    .content-title {
        height: 50px;
        display: table;
        margin: 0 auto;
    }

    .cnt-text {
        vertical-align: middle;
        display: table-cell;
        font-size: 18px;
        font-weight: 600;
    }

    .e-tab .e-listview .e-header {
        height: 50px;
    }

    .e-tab .e-listview .e-text {
        display: block;
        text-align: center;
    }

    .e-tab .e-listview:not(.e-list-template) .e-list-item {
        height: 63px;
    }

    .e-tab .e-tab-text {
        display: inherit;
    }

    .e-vertical-tab .e-content .e-item.e-active,
    .e-vertical-tab .e-content .e-item.e-active ul.e-list-parent {
        width: 100%;
    }

    @@media screen and (max-width: 481px) {
        .control-section.e-tab-section,
        .container-fluid,
        .e-tab-section .content-wrapper,
        .sb-sample-content-area .e-active {
            padding-left: 0;
            padding-right: 0;
        }
    }

    @@media screen and (max-width: 376px) {
        .e-tab .e-listview:not(.e-list-template) .e-list-item {
            padding: 0;
        }

        .e-tab-section {
            padding: 0 5px;
        }

        .e-tab .e-content.sb-sample-content-area .e-item.e-active {
            padding-left: 0;
            padding-right: 0;
        }

        .template-container {
            padding: 7px 5px 0;
        }

        .e-tab .e-content .e-item.e-active {
            padding: 10px 0;
        }
    }
</style>